<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/myjs.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <style>
        .form-control{
            width: 300px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <input type="text" id="dynName" class="form-control">
    <button id="btnQuery" class="btn btn-primary">查询</button>
    <hr>
    <table class="table table-hover">
        <tr class="table-active">
            <td>编号</td>
            <td>朝代</td>
            <td>起始年份</td>
            <td>终止年份</td>
        </tr>
        <tbody id="tbd"></tbody>
    </table>
    <nav aria-label="Page navigation example">
        <ul class="pagination" id="pageNav"></ul>
    </nav>

    <script>
        function findDynasty(page,size){
            $.get(
                "/dynasty/findDynasty",
                {dynName:$("#dynName").val(),page:page,size:size},
                function (pageBean) { //返回的是pageBean，需要使用其list中的数据
                    $("#tbd").empty();                    $("#pageNav").empty();
                    addTab("tbd",pageBean.list,['dynId','dynName','beginYear','endYear']);
                    let liFirst=pageBean.isFirstPage ? "" : `<nav aria-label="Page navigation example">
      <ul class="pagination">
           <li class="page-item"><a class="page-link" href="javascript:findDynasty(${page-1},${size})">上一页</a></li>`;
                    let li="";
                    for(let i in pageBean.navigatepageNums ) {
                        let pn=pageBean.navigatepageNums[i];
                        li+=`<li class="page-item"><a class="page-link" href="javascript:findDynasty(${pn},${size})">${pn}</a></li>`;
                    }
                    liLast=pageBean.isLastPage ? "" : `<li class="page-item"><a class="page-link"
href="javascript:findDynasty(${page+1},${size})">下一页</a></li>      </ul> </nav>`;
                    $("#pageNav").html("");
                    $("#pageNav").append(liFirst+li+liLast);

                },
                "json"
            );
        }

      /*  function findDynasty() {
            $.get(
                "/dynasty/findDynasty",
                {dynName:$("#dynName").val()},
                function (dyns) {
                    console.log(dyns);
                    addTab('tbd',dyns,['dynId','dynName','beginYear','endYear'])
                },
                "json"
            );
        }*/
        $(function () {
            $("#btnQuery").on("click",function () {
                findDynasty(1,7);
            })
        })
    </script>
</body>
</html>